<template>
  <Dialog v-model="dialogVisible" title="操作" width="60%">
    <el-row :gutter="20">
      <el-col class="bgc_ pt-10px pb-10px" :span="4">
        <el-text>触发条件</el-text>
      </el-col>
      <el-col class="bgc_ pt-10px pb-10px" :span="6">
        <el-text> 设置参数 </el-text>
      </el-col>
      <el-col class="bgc_ pt-10px pb-10px" :span="12">
        <el-text> 执行动作 </el-text>
      </el-col>
      <el-col class="bgc_ pt-10px pb-10px" :span="2">
        <el-text> 状态 </el-text>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col class="pt-10px pb-10px" :span="4">
        <el-select v-model="queryParams.listen" placeholder="请选择" @change="selectRules">
          <el-option
            v-for="item in optionA"
            :key="item.code"
            :label="item.title"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col class="pt-10px pb-10px" :span="6">
        <div v-for="item in rulesOption" :key="item.field" class="mb-10px">
          <!-- select -->
          <el-select
            class="w-100%"
            v-if="item.type == 'select'"
            v-model="queryParams.listenParams[item.field]"
            :placeholder="'请选择' + item.desc"
            :multiple="item.condition == 'in'"
            clearable
          >
            <el-option v-for="(value, key) in item.options" :key="key" :label="value" :value="key">
            </el-option>
          </el-select>
          <!--input -->
          <el-input
            class="w-100%"
            v-if="item.type == 'input'"
            v-model="queryParams.listenParams[item.field]"
            :placeholder="'请输入' + item.desc"
          ></el-input>
          <!-- textarea -->
          <el-input
            class="w-100%"
            v-if="item.type == 'textarea'"
            v-model="queryParams.listenParams[item.field]"
            :placeholder="'请输入' + item.desc"
          ></el-input>
          <!-- datetime -->
          <el-date-picker
            class="w-100%"
            v-if="item.type == 'datetime'"
            v-model="queryParams.listenParams[item.field]"
            placeholder="请选择日期"
            type="datetime"
            value-format="x"
          />
        </div>
      </el-col>
      <el-col class="pt-10px pb-10px" :span="4">
        <div v-if="optionB.length">
          <el-select v-model="queryParams.action" placeholder="请选择" @change="selectRules2">
            <el-option
              v-for="item in optionB"
              :key="item.code"
              :label="item.title"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col class="pt-10px pb-10px" :span="8">
        <div v-for="item in rulesOption2" :key="item.field" class="mb-10px">
          <!-- select -->
          <el-select
            class="w-100%"
            v-if="item.type == 'select'"
            v-model="queryParams.actionParams[item.field]"
            :placeholder="'请选择' + item.desc"
            :multiple="item.condition == 'in'"
            clearable
          >
            <el-option v-for="(value, key) in item.options" :key="key" :label="value" :value="key">
            </el-option>
          </el-select>
          <!--input -->
          <el-input
            class="w-100%"
            v-if="item.type == 'input'"
            v-model="queryParams.actionParams[item.field]"
            :placeholder="'请输入' + item.desc"
          ></el-input>
          <!-- textarea -->
          <el-input
            class="w-100%"
            v-if="item.type == 'textarea'"
            v-model="queryParams.actionParams[item.field]"
            :placeholder="'请输入' + item.desc"
          ></el-input>
          <!-- datetime -->
          <el-date-picker
            class="w-100%"
            v-if="item.type == 'datetime'"
            v-model="queryParams.actionParams[item.field]"
            placeholder="请选择日期"
            type="datetime"
            value-format="x"
          />
        </div>
      </el-col>
      <el-col :span="2" class="pt-10px pb-10px">
        <div>
          <el-switch v-model="queryParams.status" :active-value="0" :inactive-value="1" />
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import {
  listenList,
  actionList,
  createListenAction,
  updateListenAction,
  getListenAction
} from '@/api/call/aiCall/index.ts'
const dialogVisible = ref(false)

const queryParams = reactive({
  sourceId: '',
  source: 'task',
  listen: '',
  listenParams: {},
  action: '',
  actionParams: {},
  status: 0 //0 true  1false
})

const optionA = ref([])
const rulesOption = ref([])
const rulesOption2 = ref([])
const optionB = ref([])

const getListenList = async () => {
  optionA.value = await listenList()
}
// 0. 触发条件
const selectRules = async () => {
  // 1.设置参数
  rulesOption.value = optionA.value.find((item) => item.code == queryParams.listen).rules
  rulesOption.value.forEach((item) => {
    queryParams.listenParams[item.field] = item.condition == 'in' ? [] : ''
  })
  // 2. 执行动作
  optionB.value = await actionList({ listenCode: queryParams.listen })
  queryParams.actionParams = {}
}

// 0.执行动作
const selectRules2 = async () => {
  // 1.设置参数
  rulesOption2.value = optionB.value.find((item) => item.code == queryParams.action).rules
  rulesOption2.value.forEach((item) => {
    queryParams.actionParams[item.field] = item.condition == 'in' ? [] : ''
  })
}
const initValue = () => {
  queryParams.listen = ''
  queryParams.listenParams = {}
  queryParams.action = ''
  queryParams.actionParams = {}
}
const updateId = ref(null)
const fromType = ref('')
const open = async (type, id, sourceId) => {
  fromType.value = type
  queryParams.sourceId = sourceId
  dialogVisible.value = true
  await getListenList()
  if (id) {
    updateId.value = id
    const data = await getListenAction(id)
    data.listenParams = JSON.parse(data.listenParams)
    data.actionParams = JSON.parse(data.actionParams)
    queryParams.listen = data.listen
    await selectRules()
    queryParams.listenParams = data.listenParams
    queryParams.action = data.action
    await selectRules2()
    queryParams.actionParams = data.actionParams
  } else {
    initValue()
  }
}

defineExpose({ open })
const emit = defineEmits(['success'])

const loading = ref(false)
const submit = async () => {
  if (
    !queryParams.listen ||
    !queryParams.action ||
    Object.keys(queryParams.listenParams).length == 0 ||
    Object.keys(queryParams.actionParams).length == 0
  ) {
    ElMessage.warning('请检查参数')
    return
  }
  try {
    const obj = { ...queryParams }
    obj.listenParams = JSON.stringify(obj.listenParams)
    obj.actionParams = JSON.stringify(obj.actionParams)
    if (fromType.value == 'add') {
      await createListenAction(obj)
    } else {
      obj.id = updateId.value
      await updateListenAction(obj)
    }
    ElMessage.success('操作成功')
    emit('success')
    dialogVisible.value = false
  } catch {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.bgc_ {
  background: #f3f6ff;
}
</style>
